function doChart(data, id, valueF, nameF) {
    $(id).dxChart({
        dataSource: data,
        commonSeriesSettings: {
            argumentField: "hora",
            type: "stackedLine",
            label: {
                visible: true,
                connector: {
                    visible: true
                }
            }
        },
        commonPaneSettings: {
            border: {
                visible: true
            }
        },
        commonAxisSettings: {
            grid: {
                visible: true
            }
        },
        series: [
            {valueField: valueF, name: nameF}
        ],
        legend: {
            verticalAlignment: "bottom",
            horizontalAlignment: "center",
            itemTextPosition: "bottom"
        },
        tooltip: {
            enabled: true,
            customizeText: function() {
                return this.percentText + " - " + this.valueText;
            }
        }
    });
}


function doChart1(id, cpu, memory) {
//    var c1 = $('<div class="row-fluid"></div>').appendTo(id);
//    var c2 = $('<div class="row-fluid"></div>').appendTo(id);
    var c1 = $('<div style="height:50%"></div>').appendTo(id);
    var c2 = $('<div style="height:50%"></div>').appendTo(id);
    console.log(cpu + " " + memory);
    c1.dxLinearGauge({
        size: {
            width: 100
        },
        value: 10,
        title: {
            text: 'CPU',
            font: {size: 12}
        },
        scale: {
            startValue: 0,
            endValue: 100,
            majorTick: {
                visible: true,
                tickInterval: 50
            },
            minorTick: {
                visible: true,
                tickInterval: 25
            }
        },
        rangeContainer: {
            ranges: [{
                    startValue: 0,
                    endValue: 70,
                    color: '#8FBC8F'
                }, {
                    startValue: 70,
                    endValue: 100,
                    color: 'red'
                }
            ]
        }
    }
    );
    c2.dxLinearGauge({
        size: {
            width: 100
        },
        value: 10,
        title: {
            text: 'Memoria',
            font: {size: 12}
        },
        scale: {
            startValue: 0,
            endValue: 100,
            majorTick: {
                visible: true,
                tickInterval: 50
            },
            minorTick: {
                visible: true,
                tickInterval: 25
            }
        },
        rangeContainer: {
            ranges: [{
                    startValue: 0,
                    endValue: 70,
                    color: '#8FBC8F'
                }, {
                    startValue: 70,
                    endValue: 100,
                    color: 'red'
                }
            ]
        }
    });
}

function doGlide(id, cpu, memory) {
    $('<div class="row-fluid">CPU</div>').appendTo(id);
    var cpu = $('<div class="row-fluid slider_bar" id="' + id + '-glide1" style="height:50%;margin: 10px;"></div>').appendTo(id);
    $('<div class="row-fluid">Memoria</div>').appendTo(id);
    var mem = $('<div class="row-fluid slider_bar" id="' + id + '-glide2" style="height:50%;margin: 10px;"></div>').appendTo(id);
//    $('<div id="' + id + '-glide2" style="height:50%"></div>').appendTo(id);
    console.log(id);
    cpu.sGlide({
        startAt: 90,
//        startAt: cpu,
        height: 10,
        width: 100,
        unit: 'px',
        disabled: true,
        colorStart: '#66C285',
        colorEnd: '#D11919'
    });
    mem.sGlide({
        startAt: 30,
//        startAt: memory,
        height: 10,
        width: 100,
        unit: 'px',
        disabled: true,
        colorStart: '#66C285',
        colorEnd: '#D11919'
    });
}
$(document).ready(function() {
    menuClass('tablero-unidad');
    $.blockUI({
        message: "Aguarde un momento por favor"
    });
    $.ajax({
        url: '/admin/dashboard/tablerounidaddata',
        type: 'post',
        dataType: 'json',
        success: function(data) {
            if (data.response === "error") {
                bootbox.alert("Ha ocurrido un error al recuperar los datos");
                $.unblockUI();
                return;
            } else if (data.response === "success") {
                $("#units-message").html("La infraestructura actual tiene capacidad para <b>" + data.plataform_resources.unit + " UNIDADES B&Aacute;SICAS</b> de m&aacute;quinas virtuales.");

                console.log(data);
                $.each(data.dias, function(dia, instancia) {
                    if (dia === 'Do') {
                        doChart(instancia, '#resource0', 'unit', 'Instancias');
                    } else if (dia === 'Lu') {
                        doChart(instancia, '#resource1', 'unit', 'Instancias');
                    } else if (dia === 'Ma') {
                        doChart(instancia, '#resource2', 'unit', 'Instancias');
                    } else if (dia === 'Mi') {
                        doChart(instancia, '#resource3', 'unit', 'Instancias');
                    } else if (dia === 'Ju') {
                        doChart(instancia, '#resource4', 'unit', 'Instancias');
                    } else if (dia === 'Vi') {
                        doChart(instancia, '#resource5', 'unit', 'Instancias');
                    } else if (dia === 'Sa') {
                        doChart(instancia, '#resource6', 'unit', 'Instancias');
                    }
                });
                $.unblockUI();
            }
        },
        error: function(data) {
            $("#div-alert").append('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><strong>Error!</strong> Ocurrio un error inesperado.</div>');
            bootbox.alert("Ha ocurrido un error al recuperar los datos");
            $.unblockUI();
        }
    });
});

